<template>
	<view class="questions">
		<view class="test-header">
			<view @tap="submitThePapers">
				<view><image src="../../static/jiaojuan.png"></image></view>
				<text>交卷</text>
			</view>
			<!-- <view>倒计时 10:00</view> -->
			<view @tap="showFixed">{{production.field3}} 答题卡 {{swiperIndex}}/{{lists.length}}</view>
		</view>
		<swiper :current="swiperIndex - 1" @change="swiperChange" class="questions-cont">
			<swiper-item v-for="(item,index) in lists" :key="index" class="swiper-item">
				<view class="test-main">
					
					<!-- 录音模块 -->
					<gracePage :customHeader="false">
						<!-- 页面主体 -->
						<view slot="gBody">
							<view style="background-color:#36395A;">
								<!-- 音乐播放器 -->
								<view class="grace-player">
									<view class="grace-player-title" :style="{color:color}">{{item.luYin.title}}</view>
									<view class="grace-player-poster">
										<image class="grace-player-poster-img" :class="[playStatus == 1 ? 'grace-playing' : '']" 
										:src="item.luYin.coverImgUrl" mode="aspectFill"></image>
									</view>
									<!-- 播放进度 -->
									<view style="padding:25rpx;">
										<view class="progress-bar" :style="{height: height,backgroundColor:dsColor}">
											<view class="progress" :style="{width: processTemp+'%', backgroundColor: bgColor,borderRadius: borderRadius}">
											</view>
											<text class="grace-sg-slider-bar"
											:style="{
												width:'170rpx', height:'44rpx', 'line-height':'30rpx', 
												backgroundImage:bgColor, color:'#5cb85c', left:'72%', 
												borderRadius:borderRadius
											}">{{playTime}}/{{totalTime}}</text>
										</view>
									</view>
									<!-- 播放控制 -->
									<view class="grace-player-console">
										<!-- 循环模式 -->
										<view class="grace-player-tool">
											<!-- <text class="grace-player-tool graceplayer-icons" v-if="dotype == 1">&#xe677;</text> -->
											<!-- <text class="grace-player-tool graceplayer-icons" v-if="dotype == 2" style="font-size:40rpx;">&#xe636;</text> -->
										</view>
										
										<view class="grace-player-console-c">
											<!-- 前一曲 -->
											<text class="grace-player-tool graceplayer-icons"></text>
											<!-- 播放/暂停 -->
											<text class="grace-player-tool graceplayer-icons" style="font-size:66rpx;" @tap="pause" v-if="playStatus == 1">&#xe62a;</text>
											<text class="grace-player-tool graceplayer-icons" style="font-size:66rpx;" @tap="playi" v-if="playStatus == 2">&#xe618;</text>
											<!-- 后一曲 -->
											<text class="grace-player-tool graceplayer-icons"></text>
										</view>
										<!-- 播放列表按钮 -->
										<text class="grace-player-tool graceplayer-icons" ></text>
									</view>
									<!-- 歌曲列表 -->
							<!-- 		<view class="grace-shade" :style="{left:listShow?'0':'-2000px'}" 
									@tap.stop.parent="hideList" @touchmove.stop.parent="">
										<scroll-view scroll-y="true" class="graceplayer-list" 
										:style="{background:listBg, height:listHeight}">
											<view class="graceplayer-list-item">题目列表</view>
											<view class="graceplayer-list-item" 
											:class="[index == idx ? 'graceplayer-list-item-this' : '']" 
											v-for="(item, idx) in lists" :key="idx" 
											@tap="playList" :data-index="idx">{{item.title}}</view>
										</scroll-view>
									</view> -->
									

									
								</view>
							</view>
						</view>
						
						
					
					</gracePage>
					
					<!-- 原文、翻译按钮 -->
					<view >
						<view class="demo">
							<view>
								<button type="primary" class="grace-button" size="mini" @tap="yuanWen">原文</button>
							</view>
						<!-- 	<view>
								<button type="primary" class="grace-button" size="mini" @tap="fanYi">翻译</button>
							</view> -->
							<!-- <view>
								<button type="primary" class="grace-button" size="mini">录音</button>
							</view>
							<view>
								<button type="primary" class="grace-button" size="mini">录播</button>
							</view> -->
						</view>
						
						<view v-if="yuanWenDisplay">
							<view class="grace-margin-top">
								<text class="grace-title">原文</text>
							</view>
							<view style="background-color: #dadada;">
								<text  class="grace-h4">{{item.luYin.field11.replace(/\\n/g,'\n')}}</text>
										
							</view>
						</view>
					<!-- 	<view v-if="fanYiDisplay">
							<view class="grace-margin-top">
								<text class="grace-title">翻译</text>
							</view>
							<view style="background-color: #dadada;">
								<text  class="grace-h4">{{item.luYin.field14.replace(/\\n/g,'\n')}}</text>
							</view>
						</view> -->
					</view>
					
					<!-- 题目 -->
					<view class="test-title">
						<text v-if="item.code == 1">单选</text>
						<text v-else>多选</text>
						{{item.title}}
						<view class="test-title-img" v-if="!_self.$myFunction.isEmpty(item.src_title)">
							<image :src="topicImageSrc+production.field1+'/'+item.id+'/'+item.src_title"></image>
						</view>
					</view>
					<!-- 选项 -->
					<view class="test-cont">
						<view v-for="(item2,index2) in item.testList" :key="index2" @tap="testItem(index,index2,item.code)" 
						:class="{active_true:(!item.code2 && item2.code) || (item.code == 2 && item2.click_index),active:(item.code == 1 && item2.click_index && !item2.code) || (item.code == 2 && item2.click_index && !item2.code && !item.code2)}">
							<view>{{item.option[index2]}}</view>
							<text v-if="item.isimg == 1">{{item2.name}}</text>
							<!-- <image v-else :src="item2.name"></image> -->
							<image v-else :src="topicImageSrc+production.field1+'/'+item.id+'/'+item2.name"></image>
						</view>
					</view>
				</view>
				
				<!-- 按钮 -->
<!-- 				<view class="test-btn" @tap="btnNext(index)" v-if="item.code == 2 && item.code2">
					确认选项
				</view> -->
				<view class="test-describe" v-if="!item.code2">
					<view class="describe-title">
						<text>本题描述</text>
					</view>
					<view class="describe-cont">
						<text>正确答案：<text v-for="(item2,index2) in item.true_option" :key="index2">{{item.option[item2]}}</text></text>
						<text>您的答案：<text v-for="(item3,index3) in item.current" :key="index3">{{item.option[item3]}}</text></text>
						<text>本题解析：{{item.alt}}</text>
					</view>
				</view>
				<view v-if="changeTopicTipsState">
					<graceFixedMsg msg="左右滑动切换题目" :width="380" :bottom="80"></graceFixedMsg>
				</view>
			</swiper-item>
			<!-- 底部左右滑动切换题目提示 -->
		</swiper>
		<!-- 答题卡 -->
		<view class="fixed-bottom" :class="{active:show_hide}" @click.stop="hideFixed">
			<view class="tibiao" @click.stop>
				<!-- 统计数据 -->
				<view class="tibiao-bar">
					<text class="tibiao-no3">未答{{choice[2]}}</text><!-- 未选择 -->
					<view class="tibiao-null"></view>
					<text class="tibiao-no2">错误{{choice[1]}}</text><!-- 选择错误 -->
					<view class="tibiao-no"></view>
					<text class="tibiao-yes2">正确{{choice[0]}}</text><!-- 选择正确 -->
					<view class="tibiao-yes"></view>
				</view>
				<!-- 答题图示 -->
				<view>
					<text v-for="(item,index) in lists.length" :key="index"
					:class="{active_o:lists[index].topic && !lists[index].code2,active_t:!lists[index].topic && !lists[index].code2}" @tap="topic(index)">{{item}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import graceFixedMsg from "../../graceUI/components/graceFixedMsg.vue";
	import gracePage from "../../graceUI/components/gracePage.vue";
	var _self; 
	
	export default {
		data() {
			return {
				objects:[],//缓存题目作为用户试题的基础
				loadMoreText : "加载更多",
				showLoadMore : false,
				pageNum : 1,
				//每次加载的记录数
				pageSize : 10,
				//解决列表触底加载过程中服务器新增数据问题
				createTimeTo : "",
				token:"",
				swiperIndex:1,//swiper 当前下标
				show_hide:false,//题标是否隐藏 默认false 为隐藏
				istest:1,//1为练习 2为模拟 3为考试
				choice:[0,0,0],//[选择正确，选择错误，未答]
				lists:[],
				// lists:[
				// 	{
				// 		id:"",//id
				// 		title:"",//题目
				// 		src_title:"",//题目是否有图片
				// 		isimg:"",//1为文字 2为图片 选项
				// 		code:"",//1为单选 2为多选
				// 		option:[],//选项
				// 		true_option:[],//正确选项
				// 		current:[],//当前所选
				// 		topic:"",//所选是否正确 默认为'' true为正确 控制选项高亮
				// 		code2:"",//选项选择状态 默认为true false为选择
				// 		alt:"",//本题描述
				// 		testList:[//选项
				// 			{
				// 				name:"",//选项
				// 				code:"",//是否为正确答案
				// 				click_index:"",//选项是否选中
				// 			}
				//		],
				//		luYin : {
				//			title: null,
				//			singer: null,
				//			epname: null,
				//			coverImgUrl: null,
				//			src: null,//文件
				//			field11:null,//原文
				//			field14:null,//翻译
				//		},
				// 	}]
				userInfoData : "",
				productionID:"",//课程ID
				production:"",
				topicImageSrc:"",//题目图片地址前缀
				changeTopicTipsState:true,//左右滑动切换题目提示
				studyCode:'',
				// 录音模块
				color      :'#FFFFFF',
				listBg     : '#292E35',
				listHeight : '880rpx',
				
				playStatus  : 1,//1播放 、2暂停
				player      : null,
				playTime    : '00:00',
				timer       : null,

				index       : 0,
				listShow    : false,
				audioLength : 1,
				demo2:[
					{ name: '原文', value: '0', checked: true },
					{ name: '翻译', value: '1', checked: false }
				],
				yuanWenDisplay:false,
				fanYiDisplay:false,
				totalTime:'00:00',

				
				
				// 进度条
				//进度条颜色
				bgColor: '#2763b8',
				//进度条底色颜色
				dsColor: '#ffffff',
				//进度条高度
				height: '28rpx',
				//进度条圆角弧度
				borderRadius: '28rpx',
				//进度
				processTemp:0,
			};
		},
		onLoad: async function(e){
			_self = this;
			
			uni.setNavigationBarColor({
				frontColor: '#ffffff',  
				backgroundColor: '#36395A'
			});
			_self.player = uni.getBackgroundAudioManager();
			
			//页面加载时读取一次缓存
			_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
			//获取主题颜色
			_self.mainColor = _self.$myFunction.appConfig().mainColor;
			//获取应用名称
			_self.appName = _self.$myFunction.appConfig().appName;
			//记录时间，用于列表查询，必须在查询列表请求前获取时间
			_self.createTimeTo = _self.$myFunction.nowTime('Y-m-d H:i:s');
			
			//获取token，同步方法
			_self.token =  await _self.$myFunction.getToken();
			_self.token = _self.token.token;
			
			//生成成绩编码_打开试题即生成编码
			_self.studyCode = 'YSTK'+( _self.$myFunction.nowTime("Y-m-d H:i:s")).replace(/\s*/g,"").replace(/[:]/g, "").replace(/[-]/g, "");
			
			_self.topicImageSrc = _self.$myFunction.appConfig().serverIp+"resource/yunShangTianKong/topic/";
			
			//读取课程信息
			_self.productionID = e.id;
			// _self.productionID = 9;
			_self.getProductionList(_self.productionID);
		},
		onUnload(){
			clearInterval(_self.timer); //停止调用
			_self.player.stop()
			_self.playTime = '00:00';
			_self.totalTime = '00:00';
			_self.player.src ='';//当设置了新的 src 时，会自动开始播放
		},
		// 练习模式:
		// 题目未作答,用户选择答案后,自动展示正确答案和解析,同时计入本次成绩
		methods:{
			//时间显示
			timeFormat : function (s){
				s = Math.round(s);
				if(s < 60){
					if(s < 10){return '00:0'+s;}
					return '00:'+s;
				}else{
					var second = s % 60;
					s = s - second;
					var minute = s / 60;
					if(minute < 10){minute = '0'+minute;}
					if(second < 10){second = '0'+second;}
					return minute+':'+second;
				}
				
			},

			// 暂停
			pause :function () {_self.player.pause();},
			// 播放
			playi :function () {_self.player.play();},
			
			// 原文
			yuanWen:function(){
				_self.yuanWenDisplay = !_self.yuanWenDisplay;
			},
			// 翻译
			// fanYi:function(){
			// 	_self.fanYiDisplay = !_self.fanYiDisplay;
			// },
			//播放
			play:function () {
				
				var audio                = _self.lists[_self.index];
				_self.player.title       = audio.title;
				_self.player.singer      = audio.singer;
				_self.player.coverImgUrl = audio.coverImgUrl;
				_self.player.src         = audio.src;
				_self.player.play();
			},
			
			playerInit:function(){
				
				// 注意 因为背景音频播放耗费手机电量，所以平台都有管控，需在manifest中填写申请。
				
				// ios App平台，背景播放需在manifest.json -> app-plus -> distribute -> ios 节点添加 "UIBackgroundModes":["audio"] 才能保证音乐可以后台播放（打包成ipa生效）
				// 小程序平台，需在manifest.json 对应的小程序节点下，填写"requiredBackgroundModes": ["audio"]。发布小程序时平台会审核
				// Android App端默认不会在通知栏出现音量控制，如需此功能，需要在插件市场单独下载原生插件
				// _self.player = uni.getBackgroundAudioManager();
				
				// 播放进度更新
				_self.player.onTimeUpdate(()=>{
					if(_self.playStatus != 1){return ;}
					// 调整进度
					var progress = _self.player.currentTime / _self.audioLength;
					progress = Math.round(progress * 100);
					_self.playTime = _self.timeFormat(_self.player.currentTime);
					_self.processTemp = progress;
					// console.log(_self.playTime);
				});
				
				//播放
				_self.player.onPlay(()=>{
					// console.log('play');
					_self.playStatus  = 1;
					// 当前音频的长度（单位：s），只有在当前有合法的 src 时返回
					_self.audioLength = _self.player.duration;
					_self.totalTime = _self.timeFormat(_self.audioLength);
				});
				
				// 暂停
				_self.player.onPause(()=>{
					// console.log('pause');
					_self.playStatus = 2;
				});
				
				//播放结束后循环播放
				_self.player.onEnded(()=>{
					// console.log('ended');
					switch(_self.dotype){
						case 1 :
							_self.index++;
							if(_self.index + 1 > _self.lists.length){_self.index = 0;}
							_self.play();
							break;
						case 2 :
							_self.player.seek(0);
							_self.play();
						break;
					}
				});
				
				//播放
				_self.play();
			},
			
			submitThePapers(){// 左上角交卷
				if(_self.choice[0]==0&&_self.choice[1]==0){
					uni.showToast({title: "请答题后交卷",icon: 'none'});
				}else{
					uni.showModal({
					    title: '提示',
					    content: '确认要交卷吗？',
					    success: function (res) {
					        if (res.confirm) {
					            //确定
								//交卷逻辑：新增用户成绩
								_self.userGradesCreate();
					        } else if (res.cancel) {
					            //取消
					        }
					    }
					});
				}
			},
			swiperChange(e){ //swiper滑动
				this.swiperIndex = e.detail.current + 1; //当前题
				_self.changeTopicTipsState = false;
			},
			//用户作答
			testItem(a,b,c){// a:当前题  b:当前选项 c:单选多选】
				if(_self.lists[a].code2){//当前题已作答
					_self.lists[a].testList[b].click_index = !_self.lists[a].testList[b].click_index//切换选项选中状态
					if(c == 1){//为1 表示单选
						_self.lists[a].code2 = false //为false 则表示已选
						_self.lists[a].current = [b]
						if(_self.lists[a].testList[b].code){//用户答案是否正确
							//答案正确
							_self.lists[a].topic = true
							//自动切换到下一题
							// _self.swiperIndex ++
							// 正确题目数量
							_self.choice[0] ++
							// 未答题目数量
							_self.choice[2] --
							// 成绩中正确题目数量
							_self.studyField7++
						}else{
							//答案错误
							_self.lists[a].topic = false
							// 错误题目数量
							_self.choice[1] ++
							// 未答题目数量
							_self.choice[2] --
						}
						
					}else{
						//多选
					}
					//用户试题新增
					_self.addUserTopic(a);
				}else{
					//当前题目未作答
				}
			},
			btnNext(e){ //多选 确认按钮
				let a = []
				_self.lists[e].testList.forEach( (item,index) =>{
					if(item.click_index == true){
						console.log(_self.lists[e]);
						_self.lists[e].current.push(index)
						if(item.code == true){
							a.push(index)
						}
					}
				})
				// console.log(_self.lists[e].current.length > 0);
				if(_self.lists[e].current.length > 0){
					_self.lists[e].code2 = false
					if(a.length == _self.lists[e].true_option.length && a.length == _self.lists[e].current.length){
						_self.lists[e].topic = true
						this.swiperIndex ++
						// 正确题目数量
						_self.choice[0] ++
						// 未答题目数量
						_self.choice[2] --
					}else{
						_self.lists[e].topic = false
						// 错误题目数量
						_self.choice[1] ++
						// 未答题目数量
						_self.choice[2] --
					}
				}else{
					uni.showToast({
					    title: '请选择选项',
						icon:'none',
					    duration: 1500
					});
				}
			},
			topic(e){
				// console.log(this.lists[e].true_option,this.lists[e].current,!this.lists[e].code2);
				this.swiperIndex = e + 1
				this.show_hide = !this.show_hide
			},
			showFixed(){
				this.show_hide = !this.show_hide
			},
			hideFixed(){
				this.show_hide = !this.show_hide
			},
			nullFixed(){
				//占位 不可删
			},
			getProductionList: function(){
				uni.showToast({
					title: '请稍后...',
					duration:_self.$myFunction.appConfig().requestWaitTime,
					icon: 'none',
				});
				var params = {
					'id': _self.productionID
				};	
				var paramsData = {
					"jsonParas":_self.$AesUtil.encrypt(encodeURIComponent(JSON.stringify(params)))
				}		
				//重新获取一次token，防止接口返回认证失败系统重新获取的token未被使用
				_self.token = _self.$myFunction.appStorage('wuLuToken').token;				
				uni.request({
					url:  _self.$myFunction.appConfig().serverAddress+'productionDetail',
					data: paramsData,
					method : "POST",
					header : {
						'content-type':'application/x-www-form-urlencoded',
						'Authentication':_self.token
					},					
					success: data => {
						_self.$myFunction.displayLog("服务器返回数据："+JSON.stringify(data));
						uni.hideToast();
						if (data.data.code == 200) {
							_self.production = data.data.data.productionDto;	
							//获取课程对应的题目列表
							_self.getList("ICAO_P1");
						}else{
							//如果请求数据因token认证失败，则清空缓存token
							if(data.data.message.indexOf("接口访问未认证") != -1){
								uni.setStorage({
									key: 'wuLuToken',
									data: "",
									success: function () {	
										_self.$myFunction.displayLog("清空缓存token");
										//触发重新获取token
										_self.$myFunction.getToken();
										// 关闭所有页面，打开到应用内的某个页面。
										_self.$myFunction.displayLog("重加载当前页面");
										uni.reLaunch({
											url: '/pages/study/topic'
										});
									}
								});
							}else{
								uni.showToast({title: "发生错误，请重试",icon: 'none'});
							}	
						}
					},
					fail: (data, code) => {
						uni.hideToast();
						uni.showToast({title: '连接失败...',icon: 'none'});
					}					
				});				
			},
			// 获取题目列表
			getList: function(content){
				uni.showToast({
					title: '请稍后...',
					duration:_self.$myFunction.appConfig().requestWaitTime,
					icon: 'none',
				});
				var params = {
					'field1':content,
					'pageNum':_self.pageNum,
					'pageSize':_self.pageSize,
					'field':"createTime",
					'createTimeTo':_self.createTimeTo,
					'order':'desc',
					'status':"1"
				};	
				
				//重新获取一次token，防止接口返回认证失败系统重新获取的token未被使用
				_self.token = _self.$myFunction.appStorage('wuLuToken').token;
				uni.request({
					url:  _self.$myFunction.appConfig().serverAddress+'topicList',
					data: params,
					method : "POST",
					header : {
						'content-type':'application/x-www-form-urlencoded',
						'Authentication':_self.token
					},		
					success: data => {
						// 刷新完毕后关闭刷新
						uni.hideToast();
						uni.stopPullDownRefresh();
						_self.$myFunction.displayLog("服务器返回数据："+JSON.stringify(data));					
						if (data.data.code == 200) {
							//总记录数
							var total = data.data.data.total;
							// _self.$myFunction.displayLog("服务器返回数据总记录数："+total);
							var objectsData=data.data.data.rows;
							// _self.$myFunction.displayLog("服务器返回当前查询条件记录数："+objectsData.length);						
							if(total == 0){//查询到0条记录
								return;
							}else{
								_self.choice[2] = total;//记录题目数量
								if(_self.showLoadMore){//触底加载数据
									if(_self.objects.length == total){
										_self.loadMoreText = "没有更多数据了";
										_self.pageNum = 1;
									}else if(_self.objects.length < total){//后台有未加载数据
										//以用户打开界面那一刻作为时间参考点
										//两种情况：
										//1、后台有未加载历史数据
										//2、后台有新增数据（此种情况不处理，因为需要刷新列表才能将最新数据展示在最前方）
										//listObjectNum:总记录数-当前列表记录数
										for (let i = 0; i < objectsData.length; i++) {
											//避免第2种情况发生时循环过后列表会产生重复记录(有时间参数createTimeTo，此种情况不存在)
											// let duplicateRecord = false;
											// for(let j = 0;j<_self.objects.length;j++){
											// 	if(_self.objects[j].id == objectsData[i].id){
											// 		duplicateRecord = true;
											// 	}
											// }
											// if(!duplicateRecord){
												_self.objects.push(objectsData[i]);
											// }
										}
										//返回的行数小于pageSize，证明数据已全部加载完毕
										if(objectsData.length<_self.pageSize){
											_self.loadMoreText = "没有更多数据了";
										}else{
											_self.loadMoreText = "加载更多";
										}
									}else if(_self.objects.length > total){//后台有删除数据
										//后台有数据被删除时不做数据处理，即前端显示有已被删除的数据
										//此时，当点击记录查看详情时应提示"此发布已删除"
										_self.loadMoreText = "没有更多数据了";
									}
								}else{//普通重新加载
									_self.objects.splice(0);
									_self.lists.splice(0);
									for (let i = 0; i < objectsData.length; i++) {
										
										_self.objects.push(objectsData[i]);
										let listsTemp = {};
										//id
										listsTemp.id = objectsData[i].id;
										
										//题目
										listsTemp.title = objectsData[i].field4;
										// console.log(listsTemp.title);
										//题目是否有图片
										listsTemp.src_title = objectsData[i].field5;

										//1为单选 2为多选
										listsTemp.code = objectsData[i].field6;
										//选项
										listsTemp.option = objectsData[i].field7.split(",");
										//正确选项
										listsTemp.true_option = objectsData[i].field9.split(",");
										//用户选项
										listsTemp.current = objectsData[i].field12;
										//题目未答 默认为'true',
										//为'false'时，正确选项高亮显示
										listsTemp.code2 = JSON.parse(objectsData[i].field10);
										//1选项为文字 2选项为图片 
										listsTemp.isimg = objectsData[i].field8;
										//题目解析
										listsTemp.alt = objectsData[i].field11;
										
										// 选项处理
										let testList = [];
										if(_self.$myFunction.isEmpty(objectsData[i].field14) == false){
											let testListTemp = {};
											//选项1内容
											testListTemp.name =  objectsData[i].field14;
											//选项1是否正确答案
											testListTemp.code =  JSON.parse(objectsData[i].field15);
											//选项1是否选中
											testListTemp.click_index =  JSON.parse(objectsData[i].field16);
											testList.push(testListTemp);
										}
										if(_self.$myFunction.isEmpty(objectsData[i].field17) == false){
											let testListTemp = {};
											//选项2内容
											testListTemp.name =  objectsData[i].field17;
											//选项2是否正确答案
											testListTemp.code =  JSON.parse(objectsData[i].field18);
											//选项2是否选中
											testListTemp.click_index =  JSON.parse(objectsData[i].field19);
											testList.push(testListTemp);
										}
										if(_self.$myFunction.isEmpty(objectsData[i].field20) == false){
											let testListTemp = {};
											//选项3内容
											testListTemp.name =  objectsData[i].field20;
											//选项3是否正确答案
											testListTemp.code =  JSON.parse(objectsData[i].field21);
											//选项3是否选中
											testListTemp.click_index =  JSON.parse(objectsData[i].field22);
											testList.push(testListTemp);
										}
										if(_self.$myFunction.isEmpty(objectsData[i].field23) == false){
											let testListTemp = {};
											//选项4内容
											testListTemp.name =  objectsData[i].field23;
											//选项4是否正确答案
											testListTemp.code =  JSON.parse(objectsData[i].field24);
											//选项4是否选中
											testListTemp.click_index =  JSON.parse(objectsData[i].field25);
											testList.push(testListTemp);
										}
										listsTemp.testList = testList;
										
										// 录音处理
										
										//		luYin : {
										//			title: null,
										//			singer: null,
										//			epname: null,
										//			coverImgUrl: null,
										//			src: null,//文件
										//			field11:null,//原文
										//			field14:null,//翻译
										//		},
										
										let luYinTemp = {};
										luYinTemp.title = objectsData[i].field29;
										
										luYinTemp.singer = '';
										luYinTemp.epname = '';

										luYinTemp.coverImgUrl = _self.topicImageSrc+_self.production.field1+'/'+objectsData[i].id+'/'+objectsData[i].field31;
										// 音频文件
										luYinTemp.src = _self.topicImageSrc+_self.production.field1+'/'+objectsData[i].id+'/'+objectsData[i].field30;
										
										
										luYinTemp.field11 = objectsData[i].field32;
										luYinTemp.field14 = objectsData[i].field33;
										listsTemp.luYin = luYinTemp;
										
										_self.lists.push(listsTemp);
									}
									//播放列表读取成功再初始化播放器
									_self.playerInit();
								}
							}
						}else{
							//如果请求数据因token认证失败，则清空缓存token
							if(data.data.message.indexOf("接口访问未认证") != -1){
								uni.setStorage({
									key: 'wuLuToken',
									data: "",
									success: function () {	
										_self.$myFunction.displayLog("清空缓存token");
										//触发重新获取token
										_self.$myFunction.getToken();
										// 关闭所有页面，打开到应用内的某个页面。
										_self.$myFunction.displayLog("重加载当前页面");
										uni.reLaunch({
											url: '/pages/study/ICAO_P1Topic'
										});
									}
								});
							}else{
								_self.$myFunction.displayLog("题目列表读取失败："+JSON.stringify(data));
								uni.hideToast();
								uni.showToast({title: '连接失败...',icon: 'none'});
							}	
						}
					},
					fail: (data, code) => {
						uni.hideToast();
						uni.showToast({title: '连接失败...',icon: 'none'});
					}
				});
			},
			//更新用户试题
			//用户每个试题与成绩关联
			addUserTopic : function(a){
				_self.userInfoData = _self.$myFunction.appStorage('wuLuUserInfo');
				var userPhone = _self.userInfoData.field2;
				var params = {
					"field1":_self.objects[a].field1,
					"field2":_self.objects[a].field2,
					"field3":_self.objects[a].field3,
					"field4":_self.objects[a].field4,
					"field5":_self.objects[a].field5,
					"field6":_self.objects[a].field6,
					"field7":_self.objects[a].field7,
					"field8":_self.objects[a].field8,
					"field9":_self.objects[a].field9,
					"field10":false,//题目未答
					"field11":_self.objects[a].field11,
					"field12":_self.lists[a].current,//用户选项
					"field13":_self.lists[a].topic,//用户选项是否正确
					"field14":_self.objects[a].field14,
					"field15":_self.objects[a].field15,
					"field16":_self.lists[a].testList[0].click_index,//选项A是否选中
					"field17":_self.objects[a].field17,
					"field18":_self.objects[a].field18,
					"field19":_self.lists[a].testList[1].click_index,//选项B是否选中
					"field20":_self.objects[a].field20,
					"field21":_self.objects[a].field21,
					"field22":_self.lists[a].testList[2].click_index,//选项C是否选中
					"field23":_self.objects[a].field23,
					"field24":_self.objects[a].field24,
					"field25":_self.lists[a].testList[3].click_index,//选项D是否选中
					"field26":_self.objects[a].field26,
					"field27":_self.objects[a].field27,
					"field28":_self.objects[a].field28,
					"field29":_self.objects[a].field29,
					"field30":_self.objects[a].field30,
					"field31":_self.objects[a].field31,
					"field32":_self.objects[a].field32,
					"field33":_self.objects[a].field33,
					"field34":_self.objects[a].field34,
					"field35":userPhone,//手机号码
					"field36":_self.studyCode,
					"field37":_self.lists[a].id,//原题ID
					"status":1
				};
				//重新获取一次token，防止接口返回认证失败系统重新获取的token未被使用
				_self.token = _self.$myFunction.appStorage('wuLuToken').token;
				uni.request({
					url: _self.$myFunction.appConfig().serverAddress + 'userTopicCreate',
					data: params,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authentication': _self.token
					},
					success: data => {
						_self.$myFunction.displayLog("userTopicAdd服务器返回数据：" + JSON.stringify(data));
						let toastTitle, toastIcon, resType;
						if (data.data.code == 200) {
							_self.$myFunction.displayLog("用户试题创建成功" );
						}else{
							//如果请求数据因token认证失败，则清空缓存token
							if(data.data.message.indexOf("接口访问未认证") != -1){
								uni.setStorage({
									key: 'wuLuToken',
									data: "",
									success: function () {	
										_self.$myFunction.displayLog("清空缓存token");
										//触发重新获取token
										_self.$myFunction.getToken();
										// 关闭所有页面，打开到应用内的某个页面。
										_self.$myFunction.displayLog("重加载当前页面");
										uni.reLaunch({
											url: '/pages/study/topic'	
										});
									}
								});
							}else{
								_self.$myFunction.displayLog("创建失败："+JSON.stringify(data));
								uni.hideToast();
								uni.showToast({title: '连接失败...',icon: 'none'});
							}	
						};
					},
					fail: (data, code) => {
						uni.hideToast();
						uni.showToast({title: '连接失败...',icon: 'none'});
					}
				});	
			},
			//用户成绩
			userGradesCreate:function(){
				var userPhone = _self.userInfoData.field2;
				var answerNum = _self.choice[0]+_self.choice[1];
				var params = {
					"field1":_self.productionID,//科目ID
					"field2":userPhone,//用户手机号
					"field3":_self.production.field3,//课程名称
					"field4":_self.lists.length,//题目数量
					"field5":answerNum,//答题数量
					"field6":parseInt((answerNum*100)/_self.lists.length),//答题比例
					"field7":_self.choice[0],//正确数量
					"field8":parseInt((_self.choice[0]*100)/_self.lists.length),//正确比例
					"field9":"课程练习",//成绩类型
					"field10":_self.studyCode,//成绩编码
					"status":1
				};
				//重新获取一次token，防止接口返回认证失败系统重新获取的token未被使用
				_self.token = _self.$myFunction.appStorage('wuLuToken').token;
				uni.request({
					url: _self.$myFunction.appConfig().serverAddress + 'studyCreate',
					data: params,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authentication': _self.token
					},
					success: data => {
						_self.$myFunction.displayLog("studyCreate服务器返回数据：" + JSON.stringify(data));
						let toastTitle, toastIcon, resType;
						if (data.data.code == 200) {
							_self.$myFunction.displayLog("成绩创建成功" );
							uni.showToast({title: '交卷成功',icon: 'success'});//默认显示1500毫秒
							setTimeout(function () {
								// uni.navigateBack();	
								uni.redirectTo({
									url:"../study/index"
								})
							}, 1500);
						}else{
							//如果请求数据因token认证失败，则清空缓存token
							if(data.data.message.indexOf("接口访问未认证") != -1){
								uni.setStorage({
									key: 'wuLuToken',
									data: "",
									success: function () {	
										_self.$myFunction.displayLog("清空缓存token");
										//触发重新获取token
										_self.$myFunction.getToken();
										// 关闭所有页面，打开到应用内的某个页面。
										_self.$myFunction.displayLog("重加载当前页面");
										uni.reLaunch({
											url: '/pages/study/topic'	
										});
									}
								});
							}else{
								_self.$myFunction.displayLog("创建失败："+JSON.stringify(data));
								uni.hideToast();
								uni.showToast({title: '连接失败...',icon: 'none'});
							}	
						};
					},
					fail: (data, code) => {
						uni.hideToast();
						uni.showToast({title: '连接失败...',icon: 'none'});
					}
				});	
			}
		},
		components:{
			graceFixedMsg,
			gracePage
		}
	}
</script>

<style lang="less">
	page{
		height:100%;
		background:#f5f5f5;
	}
	.questions{
		height:100%;
		position: relative;
		.test-header{
			position: absolute;
			top:0;
			left:0;
			z-index: 10;
			width: 690rpx;
			padding:0 30rpx;
			display: flex;
			justify-content: space-between;
			height:34px;
			line-height: 34px;
			border-bottom: solid 1px #ddd;
			background: #f5f5f5;
			view{
				color:#555;
				font-size: 14px;
				display: flex;
				image{
					margin-top:10px;
					margin-right:5px;
					width:14px;
					height:14px;
				}
				&:nth-child(1){
					font-size: 12px;
					text{
						color:#666;
					}
				}
				&:nth-child(3){
					font-size: 12px;
					text{
						color:#666;
					}
				}
			}
		}
		.questions-cont{
			height:100%;
			display: flex;
			flex-wrap: nowrap;
			transition: all .5s;
			.swiper-item{
				width:100vw;
				min-width:100vw;
				max-width:100vw;
				height:100%;
				overflow: auto;
				.test-main{
					padding:0 20rpx;
					margin:49px 30rpx;
					margin-bottom: 20px;
					background:#fff;
					.test-title{
						margin-top: 5%;
						font-size: 16px;
						color:#333;
						padding:20rpx 0;
						text{
							font-size: 10px;
							color:#fff;
							background:#aaa;
							padding:2px 5px;
							margin-right:5px;
							border-radius: 3px;
						}
						.test-title-img{
							margin:20rpx auto;
							text-align: center;
							image{
								max-width:500rpx;
								max-height:250rpx;
							}
						}
					}
					.test-cont{
						display: flex;
						flex-direction: column;
						padding-bottom: 20rpx;
						&>view{
							min-height: 40px;
							line-height: 40px;
							display: flex;
							view{
								width:30px;
								height:30px;
								line-height: 30px;
								margin-top:4px;
								margin-right:7px;
								font-size: 14px;
								border:solid 1px #ddd;
								border-radius: 50%;
								box-shadow:2px 2px 5px #e5e5e5;
								text-align: center;
								color:#666;
							}
							image{
								max-width: 560rpx;
								max-height:280rpx;
								margin-bottom: 20rpx;
							}
							text{
								font-size: 13px;
								color:#555;
							}
							&.active_true{
								view{
									background:#1a7bb9;
									border:solid 1px #1a7bb9;
									color:#fff;
									font-size: 15px;
								}
								text{
									color:#1a7bb9;
								}
							}
							&.active{
								view{
									background:#FF6667;
									border:solid 1px #FF6667;
									color:#fff;
									font-size: 15px;
								}
								text{
									color:#FF6667;
								}
							}
						}
					}
				}
				.test-btn{
					background:#1FB19E;
					font-size: 14px;
					border-radius: 6px;
					text-align: center;
					line-height: 40px;
					color:#fff;
					height:40px;
					width:150px;
					margin:20px auto;
				}
				.test-describe{
					padding:0 20rpx;
					margin-bottom: 20px;
					border-top:solid 1px #ccc;
					.describe-title{
						height:48px;
						line-height: 48px;
						display: flex;
						text{
							color:#666;
							font-size: 12px;
						}
						image{
							width:14px;
							height:14px;
							margin-top:17px;
							margin-left:3px;
						}
					}
					.describe-cont{
						background:#f5f5f5;
						padding:12rpx;
						display: flex;
						flex-direction: column;
						&>text{
							color:#666;
							font-size: 14px;
							line-height: 24px;
							// &:nth-child(3){
							// 	font-size: 12px;
							// 	line-height: 20px;
							// }
						}
					}
				}
			}
		}
		.fixed-bottom{
			width:100%;
			height:100%;
			position: fixed;
			left:0;
			top:0;
			z-index: 999;
			background:rgba(0,0,0,.4);
			pointer-events: none;
			opacity: 0;
			transition:all .3s;
			.tibiao{
				position: absolute;
				bottom:0;
				left:0;
				background: #fff;
				width:710rpx;
				overflow: auto;
				height: 50%;
				padding:30rpx 20rpx;
				.tibiao-bar{
					display: flex;
					flex-direction: row-reverse;
					padding-bottom: 30rpx;
					border-bottom: solid 1px #ddd;
					height:16px;
					line-height: 16px;
					view{
						width:10px;
						height:10px;
						border-radius: 50%;
						margin-left: 30rpx;
						margin-top:3px;
						&.tibiao-yes{
							background:#1a7bb9;
						}
						&.tibiao-no{
							background:#FF6667;
						}
						&.tibiao-null{
							background:#999;
						}
					}
					text{
						margin-left:3px;
						display: inline-block;
						font-size: 13px;
						&.tibiao-yes2{
							color:#1a7bb9;
						}
						&.tibiao-no2{
							color:#FF6667;
						}
						&.tibiao-no3{
							color:#666;
						}
					}
				}
				&>view{
					&:nth-child(2){
						text{
							margin-left:22rpx;
							margin-top:10rpx;
							display: inline-block;
							width:100rpx;
							height:100rpx;
							line-height: 100rpx;
							text-align: center;
							border-radius: 50%;
							font-size: 14px;
							color:#666;
							background:#e4e4e4;
							&:nth-child(6n+1){
								margin-left:0;
							}
							&.active_o{
								background:#beddf1;
								color:#1a7bb9;
							}
							&.active_t{
								background:#fecece;
								color:#e3494a;
							}
						}
					}
				} 
			}
			&.active {
				opacity: 1;
				pointer-events: auto;
				transition:all .3s;
			}
		}
	}
	
	
</style>
<!-- 录音播放模块 -->
<style scoped>
/* .grace-player{padding:30rpx;} */
.grace-player-title{text-align:center; line-height:50rpx; font-size:30rpx; font-weight:bold;}
.grace-player-poster{padding:30px; line-height:0; text-align:center;}
.grace-player-poster-img{width:380rpx; height:100rpx; border-radius:300rpx; box-shadow:0rpx 2rpx 2rpx #323232;}
@keyframes grace-rotate360{0%{transform:rotate(0deg);} 50%{transform:rotate(180deg);} 100%{transform:rotate(360deg);}}
/* .grace-playing{animation:grace-rotate360 6000ms infinite linear;} */
.grace-player-console{padding:20rpx 10rpx; display:flex; flex-direction:row; align-items:center; justify-content:space-between;}
.grace-player-tool{width:100rpx; line-height:100rpx; text-align:center; font-size:50rpx; display:block; flex-shrink:0; color:#FFFFFF;}
.grace-player-console-c{width:400rpx; display:flex; flex-direction:row; justify-content:space-between;}
@font-face{
	font-family : "grace-playerfont";
	font-weight : normal;
	font-style  : normal;
	src         : url('@/static/gracePlayer.ttf') format('truetype');
}
.graceplayer-icons{font-family:"grace-playerfont"; font-style:normal;}
.graceplayer-list{width:100%; height:1000rpx; background-color:#FFFFFF; position:absolute; left:0; bottom:0; z-index:9999;}
.grace-shade{position:fixed; width:100%; height:100%; left:0; top:0; background-color:rgba(0,0,0,0.5); bottom:0; overflow:hidden; z-index:9998; display:flex; justify-content:center; align-items:center;}
.graceplayer-list-item{padding:25rpx 0rpx; margin:5rpx 30rpx; border-bottom:1px solid #373A3F; line-height:50rpx; font-size:30rpx; color:#FFFFFF;}
.graceplayer-list-item-singer{color:#888888; font-size:26rpx; margin-left:50rpx;}
.graceplayer-list-item-this{color:#64CDA5 !important; font-weight:bold;}
	/* 按钮 */
	.demo{display:flex; flex-wrap:nowrap; border-left:1px solid #F8F8F8;}
	.demo view{width:100%; text-align:center; margin:40rpx;}
	/* 进度条样式 */
	.progress-bar {
		position: relative;
		width: 100%;
		background-color: #f2f2f2;
		border-radius: 16rpx;
	}
	.progress {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
	}
	.grace-sg-slider-bar{position:absolute; left:0; top:0; border-radius:50rpx; font-size:30rpx; text-align:center; color:#323232; overflow:hidden;}
	

</style>
